<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thenewboston</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

    <div id="content"></div>

    <script type="text/jsx">

        var BuckysComponent = React.createClass({
            doSomething: function() {
                alert("The text displaying is: " + this.props.children);
            },
            render: function() {
                return(
                        <div>
                            <h3>{this.props.user}</h3>
                            <a onClick={this.doSomething} href="#" >Click me</a>
                        </div>
                );
            }
        });

        React.render(
                <div>
                    <BuckysComponent user="Bucky">This guy is awesome</BuckysComponent>
                    <BuckysComponent user="Emily">She smells like mints</BuckysComponent>
                </div>,
                document.getElementById('content')
        );

    </script>

</body>
</html>